<!doctype html>
<html lang="en">
<head>
    <title>Carousel - Event</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Overview" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijtree.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <link href="../../themes/wijmo/jquery.wijmo.wijcarousel.css" rel="stylesheet" type="text/css" />
    <script src="../../wijmo/jquery.wijmo.wijcarousel.js" type="text/javascript"></script>
    <link href="../../themes/wijmo/jquery.wijmo.wijpager.css" rel="stylesheet" type="text/css" />
    <script src="../../wijmo/jquery.wijmo.wijpager.js" type="text/javascript"></script>
    <link href="../../themes/wijmo/jquery.wijmo.wijlightbox.css" rel="stylesheet" type="text/css" />
    <script src="../../wijmo/jquery.wijmo.wijlightbox.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijcarousel0").wijcarousel({
                imageSize: {
                    width: 120,
                    height: 90
                },
                step: 4,
                display: 5,
                showCaption: false,
                showTimer: false,
                showPager: false,
                loop: false,
                itemClick: function (event, ui) {
                    var a = ui.el.children("a"), img = a.children("img:eq(0)"),
                    url = a.attr("href"), title = img.attr("title"),
                    div = $("#image1").closest("div");

                    $("#image1").attr("src", url).hide()
                    .bind("load", function () {
                        $(this).fadeIn();
                    });
                    event.preventDefault();
                }
            });
        });
    </script>
    <style type="text/css">
        #wijcarousel0
        {
            width: 650px;
            height: 90px;
        }
    </style>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div>
                <div style="width: 750px; height: 300px" class="ui-widget-content">
                    <a id="imageLink1" href="#">
                        <img id="image1" src="http://lorempixum.com/750/300/sports/1" style="width: 750px; height: 300px" alt="" /></a>
                </div>
                <p>
                    Click items to update the frame</p>
                <div id="wijcarousel0" class="ui-widget-content ui-corner-all" style="padding: 15px 15px 15px 15px;">
                    <ul class="">
                        <li class=""><a href="http://lorempixum.com/750/300/sports/1">
                            <img alt="1" src="http://lorempixum.com/200/150/sports/1" title="Word Caption 1" />
                        </a></li>
                        <li class=""><a href="http://lorempixum.com/750/300/sports/2">
                            <img alt="2" src="http://lorempixum.com/200/150/sports/2" title="Word Caption 2" />
                        </a></li>
                        <li class=""><a href="http://lorempixum.com/750/300/sports/3">
                            <img alt="3" src="http://lorempixum.com/200/150/sports/3" title="Word Caption 3" />
                        </a></li>
                        <li class=""><a href="http://lorempixum.com/750/300/sports/4">
                            <img alt="4" src="http://lorempixum.com/200/150/sports/4" title="Word Caption 4" />
                        </a></li>
                        <li class=""><a href="http://lorempixum.com/750/300/sports/5">
                            <img alt="5" src="http://lorempixum.com/200/150/sports/5" title="Word Caption 5" />
                        </a></li>
                        <li class=""><a href="http://lorempixum.com/750/300/sports/6">
                            <img alt="6" src="http://lorempixum.com/200/150/sports/6" title="Word Caption 6" />
                        </a></li>
                        <li class=""><a href="http://lorempixum.com/750/300/sports/7">
                            <img alt="7" src="http://lorempixum.com/200/150/sports/7" title="Word Caption 7" />
                        </a></li>
                        <li class=""><a href="http://lorempixum.com/750/300/sports/8">
                            <img alt="8" src="http://lorempixum.com/200/150/sports/8" title="Word Caption 8" />
                        </a></li>
                        <li class=""><a href="http://lorempixum.com/750/300/sports/9">
                            <img alt="9" src="http://lorempixum.com/200/150/sports/9" title="Word Caption 9" />
                        </a></li>
                        <li class=""><a href="http://lorempixum.com/750/300/sports/10">
                            <img alt="10" src="http://lorempixum.com/200/150/sports/10" title="Word Caption 10" />
                        </a></li>
                    </ul>
                </div>
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
        <p>This sample demonstrates how the itemClick event can be used with the wijcarousel widget so that when an image is clicked in the wijcarousel, it is displayed in an area separate from the wijcarousel.</p>
        </div>
    </div>
</body>
</html>
